<template>
  <div
    class="operation-menu-wrapper"
    :class="'file-type-6'"
    ref="operationMenuRef"
  >
    <el-button-group class="create-operate-group" v-if="!isBatchOperation">
      <el-dropdown class="upload-drop">
        <el-button type="primary" id="uploadFileId" :icon="Upload">
          上传<el-icon class="el-icon-arrow-down el-icon--right"
            ><arrow-down
          /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleUploadFileBtnClick(1)">上传文件</el-dropdown-item>
            <el-dropdown-item @click="handleUploadFileBtnClick(2)">上传文件夹</el-dropdown-item>
            <el-dropdown-item @click="handleUploadFileBtnClick(3)">拖拽上传</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown class="create-drop">
        <el-button type="primary" id="uploadFileId" :icon="Plus">
          新建<el-icon class="el-icon-arrow-down el-icon--right"
            ><arrow-down
          /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              ><div class="img-text-wrapper">
                <img :src="dirImg" /> 新建文件夹
              </div></el-dropdown-item
            >
            <el-dropdown-item divided
              ><div class="img-text-wrapper">
                <img :src="wordImg" />Word 文档
              </div></el-dropdown-item
            >
            <el-dropdown-item>
              <div class="img-text-wrapper">
                <img :src="excelImg" />Excel 工作表
              </div></el-dropdown-item
            >
            <el-dropdown-item
              ><div class="img-text-wrapper">
                <img :src="pptImg" />PPT 演示文稿
              </div></el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-button-group>
    <div class="batch-operate-group" v-if="isBatchOperation">
      <el-button-group>
        <el-button
          type="primary"
          :icon="Delete"
          @click="isBatchOperation = true"
          >批量删除</el-button
        >
        <el-button type="primary" :icon="Rank">批量移动</el-button>
        <el-button type="primary" :icon="Download">批量下载</el-button>
        <el-button type="primary" :icon="Share"
          >批量分享</el-button
        ></el-button-group
      >
    </div>
    <!-- 全局搜索文件 -->
    <el-input
      v-if="true"
      style="width: 275px"
      class="select-file-input"
      placeholder="搜索您的文件"
      maxlength="255"
      :clearable="true"
      ><template #prepend>
        <el-popover
          placement="bottom-start"
          :width="150"
          effect="dark"
          content="点击搜索"
          trigger="hover"
        >
          <template #reference>
            <el-button :icon="Search"></el-button>
          </template>
        </el-popover>
      </template>
    </el-input>

    <!-- 批量操作 -->
    <i
      class="batch-icon"
      :class="isBatchOperation ? 'active' : ''"
      :title="isBatchOperation ? '取消批量操作' : '批量操作'"
      v-if="fileGroupLable === 1"
      ><el-icon><Finished /></el-icon
    ></i>
    <i class="refresh-icon" title="刷新文件列表"
      ><el-icon><Refresh /></el-icon
    ></i>
    <el-divider direction="vertical"></el-divider>
    <template v-if="true">
      <!-- 文件展示模式 -->
      <i
        class="model-icon iconfont"
        :class="{ active: fileGroupLable === 0 }"
        title="列表模式"
        @click="handleFileDisplayModelChange(0)"
        ><el-icon><Histogram /></el-icon
      ></i>
      <i
        class="model-icon"
        :class="{ active: fileGroupLable === 1 }"
        title="网格模式"
        @click="handleFileDisplayModelChange(1)"
        ><el-icon><Grid /></el-icon
      ></i>
      <i
        class="model-icon"
        :class="{ active: fileGroupLable === 2 }"
        title="时间线模式"
        @click="handleFileDisplayModelChange(2)"
        v-if="true"
        ><el-icon><TrendCharts /></el-icon
      ></i>
      <el-divider direction="vertical"></el-divider>
    </template>
    <!-- 操作栏收纳 -->
    <el-popover placement="bottom-start" trigger="hover">
      <!-- 选择表格列 -->
      <SelectColumn></SelectColumn
      ><template v-if="true">
        <el-divider class="split-line"></el-divider>
        <!-- 图标大小调整 -->
        <div class="change-grid-size">
          <div class="title">调整图标大小</div>
          <el-slider
            :min="20"
            :max="150"
            :step="10"
            :format-tooltip="formatTooltip"
          ></el-slider>
        </div> </template
      ><template #reference>
        <i class="setting-icon"
          ><el-icon><Setting /></el-icon
        ></i> </template
    ></el-popover>
  </div>
</template>

<script setup>
import {
  Upload,
  Search,
  Plus,
  Delete,
  Rank,
  Download,
  Share,
} from "@element-plus/icons-vue";
import dirImg from "@/assets/images/file/dir.png";
import wordImg from "@/assets/images/file/file_word.svg";
import excelImg from "@/assets/images/file/file_excel.svg";
import pptImg from "@/assets/images/file/file_ppt.svg";
import SelectColumn from "./SelectColumn.vue";
import fileList from "@/store/modules/fileList";
const emit = defineEmits(["getFileModel"]);
const isBatchOperation = ref(false);
const fileGroupLable = ref(0);
/**
 * 文件查看模式切换
 * @param {number} label 0 列表 1 网格 2 时间线
 */
function handleFileDisplayModelChange(lable) {
  fileGroupLable.value = lable;
  fileList().changeFileModel(lable);
  emit("getFileModel");
}
/**
 * 上传文件按钮点击事件
 * @description 通过Bus通信，开启全局上传文件流程
 * @param {boolean} uploadWay 上传方式 0-文件上传 1-文件夹上传 2-粘贴图片或拖拽上传
 */
function handleUploadFileBtnClick(uploadWay) {
  // this.$openBox.uploadFile({
  //   params: this.uploadFileParams,
  //   uploadWay,
  //   serviceEl: this,
  //   callType: 1, //  callType 调用此服务的方式：1 - 顶部栏，2 - 右键菜单
  // });
}
</script>

<style lang="stylus" scoped>
.operation-menu-wrapper.file-type-6 {
  margin: 8px 0;
  justify-content: flex-end;
}

.operation-menu-wrapper {
  padding: 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .create-operate-group {
    flex: 1;

    .upload-drop {
      float: left;

      .el-button {
        border-radius: 4px 0 0 4px;
      }
    }

    .create-drop {
      float: left;

      .el-button {
        border-radius: 0 4px 4px 0;
      }
    }
  }

  .batch-operate-group {
    flex: 1;
  }

  .select-file-input {
    margin-right: 8px;
    width: 250px;

    .el-icon-search {
      cursor: pointer;
      font-size: 16px;

      &:hover {
        color: #409EFC;
      }
    }
  }

  .batch-icon, .model-icon {
    margin-right: 8px;

    &:last-of-type {
      margin-right: 0;
    }
  }

  .model-icon.active {
    color: #409EFC;
  }

  .refresh-icon, .batch-icon, .model-icon, .setting-icon {
    font-size: 20px;
    cursor: pointer;
    color: #909399;

    &:hover {
      color: #409EFC;
    }
  }

  .batch-icon.active {
    color: #409EFC;
  }
}

.split-line {
  margin: 8px 0;
}

.img-text-wrapper {
  display: flex;
  align-items: center;

  img {
    margin-right: 4px;
    height: 24px;
  }
}
</style>